<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- IE8浏览器的显示方式:IE=edge以IE最高版本显示，chrome=1 以谷歌浏览器模式渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 禁止缩放 -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <!-- 不识别为电话号码、邮箱 -->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!-- 删除默认的苹果工具栏、菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 360模式固定为极速模式 -->
    <meta name="renderer" content="webkit" />
    <!-- 兼容性视图设置 -->
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait" />
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application" />
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="description" content="" />
    <!--一些页面缓存的信息-->
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <!--以下为清除浏览器缓存-->
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>植选&Keep聚合页final</title>
    <script>
      (function (doc, win) {
        var docEl = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <link rel="stylesheet" href="./css/reset.css?t=6666" />
    <link rel="stylesheet" href="./css/main.css?t=1777212" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
  </head>

  <body>
    <!-- 第一页 -->
    <div class="page-1">
      <img src="./img/p1-bg.png" class="page1-bg" alt="" />
      <img src="./img/logo.png" class="logo" alt="" />
      <img src="./img/title.png" class="title" alt="" />
      <img src="./img/p1-w1.png" class="p1-w1" alt="" />
      <img src="./img/p1-w2.png" class="p1-w2" alt="" />
    </div>
    <!-- 视频 -->
    <div class="video-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video
            src="http://video.yinshuiyu.com/f6859a04d6c64fd995b7c3952c9e14d1/85148f3a1fd445ae9d2b7eb73cb64ae8-5287d2089db37e62345123a1be272f8b.mp4"
            poster="./img/poster1.png"
            preload="true"
            x5-video-player-fullscreen="true"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x-webkit-airplay="true"
            x5-playsinline="true"
          ></video>
          <!--控制条盒子-->
          <div class="video-control">
            <div class="pull-left fontzero control-leftview">
              <!--暂停/播放键-->
              <div class="control-btn playbtn"></div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <video
            src="http://video.yinshuiyu.com/8911361fecdd48dbafb4d5cc25c970ea/fa6cd263d44f452aadcfe5bae8b1220b-5287d2089db37e62345123a1be272f8b.mp4"
            poster="./img/poster2.png"
            preload="true"
            x5-video-player-fullscreen="true"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x-webkit-airplay="true"
            x5-playsinline="true"
          ></video>

          <!--控制条盒子-->
          <div class="video-control">
            <div class="pull-left fontzero control-leftview">
              <!--暂停/播放键-->
              <div class="control-btn playbtn"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="video-swiper-button-left">
        <img src="./img/arr-left.png" alt="" />
      </div>
      <div class="video-swiper-button-right">
        <img src="./img/arr-right.png" alt="" />
      </div>
      <div class="video-swiper-pagination"></div>
    </div>
    <!-- 第二页 -->
    <div class="page-2">
      <img src="./img/p2-bg.png" class="p2-bg" alt="" />
      <a
        href="https://market.m.taobao.com/app/tb-source-app/shopact/pages/index?wh_weex=true&pathInfo=shop/activity&userId=299244686&shopId=59292822&pageId=191123486&alisite=true"
      >
        <img src="./img/jd-btn.png?t=1" class="jd-btn" alt=""
      /></a>

      <img src="./img/p2-w.png" class="p2-w" alt="" />

      <div class="p2-swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/p2-item1.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/p2-item2.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/p2-item3.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/p2-item4.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/p2-item5.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/p2-item6.png" alt="" />
          </div>
        </div>
        <div class="p2-swiper-pagination"></div>
      </div>

      <img src="./img/challenge-btn.png" class="challenge-btn" alt="" />
    </div>
    <!-- 第三页 -->
    <div class="page-3">
      <img src="./img/p3-bg.png" class="p3-bg" alt="" />
      <img src="./img/active-reword.png" class="l-50p active-reword" alt="" />
      <img src="./img/active7.png" class="l-50p active7" alt="" />
      <img src="./img/reword.png" class="l-50p reword" alt="" />
      <div class="reword-wrap l-50p df-aifs-jcsb">
        <div>
          <img src="./img/lp1.png" class="w260 mb34" alt="" />
          <img src="./img/lp1-title.png" class="h42" alt="" />
        </div>
        <div>
          <img src="./img/lp2.png" class="w332 mb30" alt="" />
          <img src="./img/lp2-title.png" class="h42 mb14" alt="" />
          <img src="./img/lp2-desc.png" class="w268" alt="" />
        </div>
      </div>

      <img src="./img/active14.png" class="l-50p active7 active14" alt="" />
      <img src="./img/reword.png" class="l-50p reword reword2" alt="" />

      <div class="reword-wrap reword-wrap2 l-50p">
        <div class="df-aic-jcc-fdc mb40">
          <img src="./img/lp3.png" class="w360 mb30" alt="" />
          <img src="./img/lp3-title.png" class="h42" alt="" />
        </div>
        <div class="df-aifs-jcsb">
          <div>
            <img src="./img/lp4.png" class="w134 mb30 mt14" alt="" />
            <img src="./img/lp4-title.png" class="h42" alt="" />
          </div>
          <div>
            <img src="./img/lp2.png" class="w332 mb30" alt="" />
            <img src="./img/lp2-title.png" class="h42 mb14" alt="" />
            <img src="./img/lp2-desc.png" class="w268" alt="" />
          </div>
        </div>
      </div>

      <img src="./img/title-plant-keep.png" class="title-plant-keep" alt="" />
      <img src="./img/yddr.png" class="yddr l-50p" alt="" />

      <div class="human-wrap l-50p">
        <img src="./img/human1-bg.png" alt="" />
        <img src="./img/human1.png" class="human-info l-50p" alt="" />
        <img src="./img/human1-desc.png" class="human-desc l-50p" alt="" />
        <div class="human-video">
          <video
            src="http://video.yinshuiyu.com/8911361fecdd48dbafb4d5cc25c970ea/fa6cd263d44f452aadcfe5bae8b1220b-5287d2089db37e62345123a1be272f8b.mp4"
            poster="./img/poster1.png"
            preload="true"
            x5-video-player-fullscreen="true"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x-webkit-airplay="true"
            x5-playsinline="true"
          ></video>
          <!--控制条盒子-->
          <div class="video-control">
            <div class="pull-left fontzero control-leftview">
              <!--暂停/播放键-->
              <div class="control-btn playbtn"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="human-wrap human-wrap2 l-50p">
        <img src="./img/human2-bg.png" alt="" />
        <img src="./img/human2.png" class="human-info l-50p" alt="" />
        <img src="./img/human2-desc.png" class="human-desc l-50p" alt="" />
        <div class="human-video">
          <video
            src="http://video.yinshuiyu.com/f6859a04d6c64fd995b7c3952c9e14d1/85148f3a1fd445ae9d2b7eb73cb64ae8-5287d2089db37e62345123a1be272f8b.mp4"
            poster="./img/poster2.png"
            preload="true"
            x5-video-player-fullscreen="true"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x-webkit-airplay="true"
            x5-playsinline="true"
          ></video>
          <!--控制条盒子-->
          <div class="video-control">
            <div class="pull-left fontzero control-leftview">
              <!--暂停/播放键-->
              <div class="control-btn playbtn"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第四页 -->
    <div class="page-4">
      <img src="./img/p4-bg.png" class="p4-bg" alt="" />
      <img src="./img/p4-title2.png" class="l-50p p4-title" alt="" />
      <img src="./img/p4-desc.png" class="l-50p p4-desc" alt="" />
      <img src="./img/p4-btn.png" class="l-50p p4-btn" alt="" />
    </div>
    <div class="page-5">
      <div class="p5-swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/p5-item1-bg.png" alt="" />
            <img
              src="./img/p5-item-title.png"
              class="p5-item-title l-50p"
              alt=""
            />
            <img src="./img/p5-item1-des.png" class="p5-item1-des" alt="" />
            <img src="./img/p5-bg.png" class="p5-bg" alt="" />
          </div>
          <div class="swiper-slide">
            <img
              src="./img/p5-item-title.png"
              class="p5-item-title l-50p"
              alt=""
            />
            <img
              src="./img/p5-item2-des.png"
              class="p5-item2-des l-50p"
              alt=""
            />
            <img src="./img/p5-item2-bg.png" alt="" />
            <!-- <img src="./img/p5-bg.png" class="p5-bg" alt=""> -->
          </div>
          <div class="swiper-slide">
            <img
              src="./img/p5-item-title.png"
              class="p5-item-title l-50p"
              alt=""
            />
            <img
              src="./img/p5-item3-des.png"
              class="p5-item3-des l-50p"
              alt=""
            />
            <img src="./img/p5-item3-bg.png" alt="" />
            <!-- <img src="./img/p5-bg.png" class="p5-bg" alt=""> -->
          </div>
        </div>
        <div class="p5-swiper-pagination"></div>
      </div>
      <a
        href="https://market.m.taobao.com/app/tb-source-app/shopact/pages/index?wh_weex=true&pathInfo=shop/activity&userId=299244686&shopId=59292822&pageId=191123486&alisite=true"
      >
        <img src="./img/jd-btn.png?t=1" class="jd-btn2" alt=""
      /></a>
    </div>
    <script src="./js/zepto.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/main.js"></script>
    <script>
      var videoSwiper = new Swiper(".video-swiper-container", {
        pagination: {
          el: ".video-swiper-pagination",
        },

        navigation: {
          nextEl: ".video-swiper-button-right",
          prevEl: ".video-swiper-button-left",
        },
        on: {
          resize: function () {},
        },
      });
      var p2Swiper = new Swiper(".p2-swiper-container", {
        watchSlidesProgress: true,
        slidesPerView: "auto",
        centeredSlides: true,
        pagination: {
          el: ".p2-swiper-pagination",
        },
        on: {
          progress: function (progress) {
            for (i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              translate = slideProgress * modify * -12 + "px";
              scale = 1 - Math.abs(slideProgress) / 5;
              zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform(
                "translateX(" + translate + ") scale(" + scale + ")"
              );
              slide.css("zIndex", zIndex);
              slide.css("opacity", 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css("opacity", 0);
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
      });
      var p5Swiper = new Swiper(".p5-swiper-container", {
        pagination: {
          el: ".p5-swiper-pagination",
        },
        on: {
          resize: function () {},
        },
      });
    </script>
  </body>
</html>
